<template>
    <div class="header-nav">
        <div class="nav-item" v-for="item in navList" :key="item.path"
            :class="(item.menuName === $route.meta.nav) && 'nav-item--active'" @click="goToPath(item.path,item.menuId)">
            <span>{{ item.menuName }}</span>
        </div>
    </div>
</template>

<script>
import { getFistMenu } from "@/api/his/getMenu";

export default {
    name: "HeaderNav",
    data() {
        return {
            navList: [],
            activeIndex: 0
        }
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            getFistMenu().then(response => {
                this.navList = response.map(item => ({
                    menuName: item.menuName.replace(/系统/g, ''),
                    path: this.addLeadingSlash(item.path),
                    menuId: item.menuId
                }));
                 // 设置默认选中第一个菜单项
                  // if (this.navList.length > 0) {
                  //   // this.$router.push(this.navList[0].path);  // 将路由重定向到第一个菜单项的路径
                  //   localStorage.setItem("menuId",this.navList[0].menuId)
                  //   // this.activeIndex = 0;  // 设置默认选中的菜单项索引为
                  // }
            });
        },
        addLeadingSlash(path) {
            // 确保路径以斜杠开头
            return path.startsWith('/') ? path : `/${path}`;
        },
        goToPath(path,menuId) {
          // 跳转到指定路径
          this.$router.push({ path: path, query: { menuId: menuId } });
        },
    }
}
</script>

<style lang="scss" scoped>
.header-nav {
    display: flex;
    align-items: center;
    height: 42px;
    padding-left: 69px;

    .nav-item {
        height: 42px;
        width: 138px;
        text-align: center;
        position: relative;
        cursor: pointer;
        user-select: none;
        font-weight: bold;

        span {
            line-height: 42px;
            font-size: 16px;
            color: #000;
        }

        &--active {
            span {
                color: #fff;
                position: relative;
                z-index: 10;
            }

            &::before {
                content: '';
                display: block;
                position: absolute;
                left: 0;
                top: 0px;
                background: linear-gradient(0deg, #4373F1, #C0CFF8);
                height: 100%;
                width: 100%;
                transform: skew(-45deg);
            }
        }
    }
}
</style>
